<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加考勤</title>
    <!--layui引用-->
    <style>
        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
        .layui-table-cell {
            overflow: visible !important;
        }

        /* 使得下拉框与单元格刚好合适 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<form class="layui-form">
    <input type="hidden" class="layui-input state1" lay-verify="state1">
    <input type="hidden" class="layui-input state2" lay-verify="state2">
    <input type="hidden" class="layui-input state3" lay-verify="state3">
    <input type="hidden" class="layui-input state4" lay-verify="state4">

    <input type="hidden" class="layui-input note1" lay-verify="note1">
    <input type="hidden" class="layui-input note2" lay-verify="note2">
    <input type="hidden" class="layui-input note3" lay-verify="note3">
    <input type="hidden" class="layui-input note4" lay-verify="note4">
    <div class="layui-form-item">
        <div class="demoTable">
            <div class="layui-inline">
                <label class="layui-form-label">考勤日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input demoDate" id="demoDate" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit="" data-type="reload" lay-filter="add">
                    <i class="layui-icon">&#xe615;</i>添加
                </button>
            </div>
        </div>
    </div>
    <!--表格-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
</form>
<script type="text/html" id="switchTpl">
    <select name="filter" lay-filter="filter">
        <option value="正常">正常</option>
        <option value="迟到">迟到</option>
        <option value="早退">早退</option>
        <option value="请假">请假</option>
        <option value="旷课">旷课</option>
    </select>
</script>
<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery;

        $('.state1').val("正常");
        $('.state2').val("正常");
        $('.state3').val("正常");
        $('.state4').val("正常");

        //日期范围
        var date = laydate.render({
            elem: '#demoDate'
            , value: new Date()
            , min: -7
            , max: 'new Date()'
            , ready: function () {
                date.hint('日期可选值设定在 <br> 七天内');
            }
        });

        //展示已知数据
        table.render({
            elem: '#test'
            , height: 600
            , url: '/atb/addSelect.do'
            , cols: [[ //标题栏
                {field: 'no', title: '学号'}
                , {field: 'name', title: '姓名'}
                , {field: 'state', title: '考勤情况', templet: '#switchTpl', unresize: true}
                , {field: 'note', title: '备注', edit: 'text'}
            ]]
            , even: true
            , id: 'testReload'
        });

        // 监听行单击事件（单击事件为：rowDouble）
        table.on('row(test)', function (obj) {
            var data1 = obj.data;
            // console.log(data1.no);
            // 监听表格中下拉栏
            form.on('select(filter)', function (data) {
                if (data1.no === 1) {
                    $('.state1').val(data.value);
                } else if (data1.no === 2) {
                    $('.state2').val(data.value);
                } else if (data1.no === 3) {
                    $('.state3').val(data.value);
                } else if (data1.no === 4) {
                    $('.state4').val(data.value);
                }
                // console.log(data.value); //得到被选中的值
            });
        });

        // 监听备注编辑
        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            // layer.msg('[No: ' + data.no + '] ' + field + ' 字段更改为：' + value);
            // console.log(data.no);
            if (data.no === 1) {
                $('.note1').val(value);
            } else if (data.no === 2) {
                $('.note2').val(value);
            } else if (data.no === 3) {
                $('.note3').val(value);
            } else if (data.no === 4) {
                $('.note4').val(value);
            }
        });

        //监听提交
        form.on('submit(add)', function () {
            // 弹出loading
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            // 上传路径
            $.get('/atb/add.do', {
                demoDate: $(".demoDate").val(), // 考勤日期
                state1: $(".state1").val(),  // 状态一
                state2: $(".state2").val(),  // 状态二
                state3: $(".state3").val(),  // 状态三
                state4: $('.state4').val(),  // 状态四
                note1: $(".note1").val(),  // 备注一
                note2: $(".note2").val(),  // 备注二
                note3: $(".note3").val(),  // 备注三
                note4: $('.note4').val()  // 备注四
            }, function (res) {
                // 解析res
                res = eval("(" + res + ")");
                var rlt = res['rlt'];
                if (rlt !== 1) {
                    top.layer.msg('操作失败');
                } else {
                    top.layer.msg("考勤添加成功！");
                }
            });
            setTimeout(function () {
                top.layer.close(index);
                layer.closeAll("iframe");
                // 刷新父页面
                parent.location.reload();
            }, 500);
            return false;
        });

    });
</script>
</body>
</html>